<template>
  <div class="base-container flex-box">
    <el-card class="user-info">
      <div slot="header">
        个人信息
      </div>
      <div>
        <div style="text-align: center">
          <el-upload
            :on-success="successHandle"
            :file-list="avatarfileList"
            :action="avatarAction"
            :auto-upload="true"
            :show-file-list="false"
            :before-upload="avatarBeforeUpload"
            accept="image/*"
            class="avatar-uploader-icon"
            :headers="{ ACCESS_TOKEN: ACCESS_TOKEN }"
          >
            <img
              :src="this.staticBaseSrc + this.avatar"
              alt=""
              title="更换头像"
              class="avatar"
            />
          </el-upload>
        </div>
        <ul>
          <li class="row">
            <div>
              <i class="el-icon-s-home"></i>
              <span>登录账号</span>
            </div>
            <span>{{ this.username }}</span>
          </li>
          <li class="row">
            <div>
              <i class="el-icon-user"></i>
              <span>用户昵称</span>
            </div>
            <span>{{ this.nickname }}</span>
          </li>
          <li class="row">
            <div>
              <i class="el-icon-phone"></i>
              <span>手机号码</span>
            </div>
            <span>{{ this.phoneNumber }}</span>
          </li>
          <li class="row">
            <div>
              <i class="el-icon-s-promotion"></i>
              <span>用户邮箱</span>
            </div>
            <span>{{ this.email }}</span>
          </li>
          <li class="row">
            <div>
              <i class="el-icon-price-tag"></i>
              <span>安全设置</span>
            </div>
            <span
              ><el-link type="primary" @click="openEditPassword"
                >修改密码</el-link
              ></span
            >
          </li>
        </ul>
      </div>
    </el-card>
    <el-card class="right-boat">
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="userInfo" v-loading="userPanelLoad">
          <el-row :gutter="15">
            <el-form
              ref="userForm"
              :model="userData"
              :rules="userInfoRules"
              size="medium"
              label-width="100px"
            >
              <el-col :span="14">
                <el-form-item label="昵称" prop="nickname">
                  <el-input
                    v-model="userData.nickname"
                    placeholder="请输入昵称"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="userData.sex" size="mini">
                    <el-radio-button
                      v-for="(item, index) in sexOptions"
                      :key="index"
                      :label="item.value"
                      :disabled="item.disabled"
                      >{{ item.label }}</el-radio-button
                    >
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="手机号" prop="phoneNumber">
                  <el-input
                    v-model="userData.phoneNumber"
                    placeholder="请输入手机号"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="用户邮箱" prop="email">
                  <el-input
                    v-model="userData.email"
                    placeholder="请输入用户邮箱"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="14">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="userData.remark"
                    type="textarea"
                    placeholder="请输入备注"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item size="large">
                  <el-button type="primary" @click="submitForm">提交</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="actionLog">
          <userLog :username="username"></userLog>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <editPassword ref="editPassword"></editPassword>
  </div>
</template>

<script>
import { sendJSON } from "@/utils/request";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import userLog from "./component/userLog";
import editPassword from "./component/editPassword";

export default {
  components: {
    userLog,
    editPassword
  },
  mounted() {
    this.resetForm();
    this.ACCESS_TOKEN = getToken();
  },
  data() {
    return {
      ACCESS_TOKEN: "",

      activeName: "userInfo",
      userData: {
        nickname: undefined,
        sex: 1,
        phoneNumber: undefined,
        email: undefined,
        remark: undefined
      },
      userInfoRules: {
        nickname: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur"
          }
        ],
        sex: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "change"
          }
        ],
        phoneNumber: [],
        email: [],
        remark: []
      },
      sexOptions: [
        {
          label: "男",
          value: 1
        },
        {
          label: "女",
          value: 2
        }
      ],
      avatarAction: "/sys/storage/upload",
      avatarfileList: [],
      userPanelLoad: false
    };
  },
  methods: {
    submitForm() {
      this.$refs["userForm"].validate(valid => {
        if (!valid) return;
        // TODO 提交表单
        this.userPanelLoad = true;
        sendJSON("/sys/user/updMsf", this.userData).then(res => {
          console.log(res);
          this.$message(res.msg);
          setTimeout(() => {
            this.userPanelLoad = false;
          }, 500);
          if (res.success) {
            this.resetForm();
          }
        });
      });
    },
    resetForm() {
      this.userPanelLoad = true;

      this.userData = {
        nickname: this.nickname,
        sex: this.sex,
        phoneNumber: this.phoneNumber,
        email: this.email,
        remark: this.remark
      };
      setTimeout(() => {
        this.userPanelLoad = false;
      }, 500);
      // this.$refs["userForm"].resetFields();
    },
    // 图片上传成功
    // {msg: "上传成功", code: 200, data: "20210325153305.png", success: true, time: "2021-03-25 15:33:36"}
    successHandle(res, file, fileList) {
      console.log(res.data);
      sendJSON("sys/user/updMsf", this.userData).then(res => {
        this.$message(res.msg);
      });
    },
    // 图片上传前校验
    avatarBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5;
      if (!isRightSize) {
        this.$message.error("文件大小超过 5MB");
      }
      let isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    },
    // 修改密码
    openEditPassword() {
      this.$refs.editPassword.dialogVisible = true;
    }
  },
  computed: {
    ...mapGetters([
      "avatar",
      "username",
      "nickname",
      "email",
      "phoneNumber",
      "sex",
      "roleName",
      "remark",
      "staticBaseSrc"
    ])
  }
};
</script>

<style lang="scss">
@import "@/styles/base/index.scss";
.flex-box {
  display: flex;
  justify-content: space-between;
}
.user-info {
  width: 380px;
  padding: 20px 10px 0px;
  ul {
    padding-left: 0;
  }
  .row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0f3f4;
    padding: 11px 0;
    font-size: 13px;
    i {
      color: grey;
    }
  }
}
.right-boat {
  flex: 1;
  margin-left: 20px;
}
.avatar-uploader-icon {
  font-size: 28px;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  margin: 0 auto;
  background: #c1c5cd;
  border-radius: 50%;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
</style>
